window.addEventListener('load', function () {
    // 1.鼠标经过轮播图，左右按钮显示，离开左右按钮隐藏。
    // 2.点击右侧按钮图片往左侧播放一张，以此类推，左侧按钮同理。
    // 4.点击小圆圈可以播放相应的图片
    // 3.播放图片的同时线面的小圆圈模块跟着一块播放
    // 5.鼠标不经过轮播图，图片会自动播放
    // 6.鼠标经过轮播图自动停止播放
    var focus = document.querySelector('.focus');
    var arrow_l = document.querySelector('.arrow_l');
    var arrow_r = document.querySelector('.arrow_r');
    var ul = focus.querySelector('ul');
    var ol = focus.querySelector('.circle');
    var focusWidth = focus.offsetWidth;

    // 1.动态生成小点
    for (var i = 0; i < ul.children.length; i++) {
        var li = document.createElement('li');
        ol.appendChild(li);
        ol.children[i].setAttribute('index', i);

    }
    ol.children[0].className = 'current';

    // ul追加第一张图片
    var lili = ul.children[0].cloneNode(true);
    ul.appendChild(lili);

    // 2.鼠标经过轮播图
    focus.addEventListener('mouseenter', function () {
        arrow_l.style.display = "block";
        arrow_r.style.display = "block";
        // 鼠标经过focus图片不滚动
        clearInterval(timer);
        timer = null;
    })
    // 3.鼠标离开图片继续滚动
    focus.addEventListener('mouseleave', function () {
        arrow_l.style.display = "none";
        arrow_r.style.display = "none";
        // 鼠标离开focus图片继续滚动
        timer = setInterval(autoScroll, 2000);
    })

    // 4.点击右侧按钮图片滚动
    var num = 0; //num左右按钮控制图片的变量
    var circle = 0; //控制圆点移动
    arrow_r.addEventListener('click', function () {
        // 轮播图变换
        if (num == 4) {
            num = 0;
            ul.style.left = 0 + 'px';
        }
        num++;
        animate(ul, -num * focusWidth);
        //点击按钮小圆点跟着动,但是图片不动
        circle++;
        if (circle == 4) {
            circle = 0;
        }
        // ol.children[circle].click();
        circleChange();
    })
    // 5.点击左侧按钮图片滚动
    arrow_l.addEventListener('click', function () {
        // 轮播图变换
        if (num == 0) {
            num = 4;
            ul.style.left = -num * focusWidth + 'px';
        }
        num--;
        animate(ul, -num * focusWidth);
        circle--;
        if (circle == -1) {
            circle = 3;
        }
        // ol.children[circle].click();
        circleChange();
    })
    //6.点击圆点图片滚动
    var index = 0; //小圆点控制图片转动的变量
    for (var i = 0; i < ol.children.length; i++) {
        // console.log(i);
        ol.children[i].addEventListener('click', function () {

            // 点击圆点图片滚动
            index = this.getAttribute('index');
            //点击圆点控制按钮跟着动
            num = index;
            circle = index;
            // console.log(index);
            // 排他思想
            circleChange();
            animate(ul, -index * focusWidth);
            // console.log(i);
        })
    }
    function circleChange() {
        // 排他思想
        for (var j = 0; j < ol.children.length; j++) {
            ol.children[j].className = '';
        }
        ol.children[circle].className = 'current';
    }
    var timer = setInterval(autoScroll, 2000);
    function autoScroll() {
        arrow_r.click();

    }
})
